<template>
  <div class="hrefInfoBody">
    <div class="topBox">
      <div class="descBox">
        <div class="leftLine"></div>
        <div class="leftInfo">
            <!--<div class="topLeftInfo">{{siteInfo.name}}</div>-->
            <div class="bottomLeftInfo">{{'选择我们的'}}</div>
        </div>

        <div class="middleInfo">
            <div class="cycleBox">
                <div class="cycleText">4</div>
            </div>
        </div>
        <div class="rightInfo">

            <!--<div class="topRightInfo">{{'玻璃钢复合型材'}}</div>-->
            <div class="bottomRightInfo">{{'大核心优势'}}</div>
        </div>
        <div class="rightLine"></div>
      </div>
    </div>
    <div class="bottomBox">
      <div class="infoList">
        <div class="infoItem" v-for="(item,index) in infoData" :key="index">
          <a class="infoA" href="javascript:;" :alt="item.desc">
              <div class="media">
                  <!--<img class="media-icon" :src="item.icon">-->
                  <div class="topTitle">
                    <div class="iconfont leftIcon " :class="index==0?'blueBG xiaozhun':(index==1?'greenBG Furnacetemperaturecontrol':(index==2?'redBG yjs-yj2':'skyBG fangfushi'))"></div>
                    <h4 :model="item.title" class="mediaHeading">{{item.title}}</h4>
                  </div>
                  
                  <div class="mediaBody">
                      <p :model="item.desc" class="mediaDesc">{{item.desc}}</p>
                  </div>
              </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { throwError } from 'element-plus/es/utils/error.mjs';
  import Tool from '@/utils/tools'

  let infoData = ref({})

  let {data,pending,status,error,refresh}= await GetMainHrefInfo()
  if(process.server && error.value){
    throwError((error.value?.data,error.value?.data.error+': '+error.value?.data.status),'页面加载失败，请联系客服！')
  }

  if(data.value?.length>0){
    data.value.forEach((item) => {
      if(item.name.indexOf('轮播图')!=-1){
        infoData.value = item.coreDescDtos
      }
    })
    
  
    // localStorage.setItem('productTypes', JSON.stringify(productTypes.value) )
    // console.log("优势信息：", infoData)
  }

</script>

<style lang="scss" scoped>
@import '@/assets/css/common.scss';
@import '@/assets/css/index.scss';
.hrefInfoBody{
  margin-top: 10px;
  .topBox{
    width: 100%;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;

    .descBox{
    padding: 5px 0;
    width: 25%;
    /*background-color: #006497;*/
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    /* 背景渐变色 - 原理2 */
    background: linear-gradient(-45deg, #006497, #3ce78f, #23a6d5, #23d5ab);
    /* 背景尺寸 - 原理3 */
    background-size: 600% 600%;
    /* 循环动画 - 原理4 */
    animation: gradientBG 8s ease infinite;
      .leftLine{
          position: absolute;
          left: 10px;
          top: -10px;
          width: 5px;
          height: 50px;
          background-color: #ffffff;
          transform: rotateZ(45deg);
      }
      .rightLine{
          position: absolute;
          right: 10px;
          bottom: -20px;
          width: 5px;
          height: 50px;
          background-color: #ffffff;
          transform: rotateZ(45deg);
      }
      .leftInfo{
        width: 40%;
        display: flex;
        flex-direction: column;
        justify-content: end;
        font-size: 24px;
        font-style: italic;
        letter-spacing: 0.15em;
        .bottomLeftInfo{
          display: flex;
          justify-content: right;
          /*color: #092498;*/
          color: #ffffff;
          font-size: 22px;
        }
      }
      .middleInfo{
        width: 10%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 10px;
        .cycleBox{
          display: flex;
          justify-content: center;
          align-items: center;
          width: 40px;
          height: 40px;
          padding:0 3px 0 0;
          background-color: #e92322;
          /*background-color: #006497;*/
          border-radius: 50%;
          .cycleText{
            display: block;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 30px;

            }
          }
    
      }
      .rightInfo{
        width: 40%;
        display: flex;
        flex-direction: column;
        font-size: 24px;
        font-style: italic;
        letter-spacing: 0.15em;
        .bottomRightInfo{
          display: flex;
          justify-content: left;
          /*color: #092498;*/
          color: #ffffff;
          font-size: 22px;
        }
      }
    }
  }
  .bottomBox{
    width: 70%;
    display: flex;
    margin: auto;
    .infoList{
      margin-top: 20px;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .infoItem{
        width: 25%;
        .infoA{
          color: #777;
          
          .media{
            display: flex;
            flex-direction: column;
            &:hover{
              text-decoration: none;
              color: #e92322;
              border-bottom: unset;
            }
            .topTitle{
              display: flex;
              align-items: center;
              
              .leftIcon{
                height: 40px;
                width: 40px;
                display: flex;
                border-radius: 50%;
                align-items: center;
                justify-content: center;
                text-align: center;
                color: white;
                
              }
              .mediaHeading{
                margin-left: 10px;
                padding: 0 !important;
                font-size: 24px;
                margin: 0 0 0 10px;
                font-family: 'Microsoft YaHei';
              }
            }
            
            
            .mediaBody{
              width: calc(100% - 30px);
              display: flex;
              flex-direction: column;
              align-items: start;
              justify-content: left;
              margin-left: 10px;
              &:last-child{
                width: calc(100% - 10px);
              }
              .mediaDesc{
                overflow: hidden;
								word-break: break-all;  /* break-all(允许在单词内换行。) */
								text-overflow: ellipsis;  /* 超出部分省略号 */
								display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
								-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
								-webkit-line-clamp: 4; /** 显示的行数 **/
                margin: 0 0 0 40px;
                font-size: 15px;
              }
            }
          }
        }
      }
    }
  }
}
  
</style>